<template>
  <MessageBox>
    <div class="phoneMiniPrograme">
      <div class="title">
        <img src="@/assets/chatDetails/Appletbg.png" alt="">
        <span>{{props.materialsInfo[0].name}}</span>
      </div>
      <div class="content">
        <img :src="props.materialsInfo[0].mpUrl" alt="">
      </div>
      <div class="footer">
        <img src="@/assets/chatDetails/Applet.png" alt="">
        <span>小程序</span>
      </div>
    </div>
  </MessageBox>
</template>

<script setup lang='ts'>
import {reactive, ref, computed, watch, onMounted, defineProps} from "vue"
import {useRouter, useRoute} from "vue-router"
import MessageBox from './MessageBox.vue'

const props = defineProps(['materialsInfo'])

onMounted(()=>{
  // console.log('props.materialsInfo - -   PhoneMiniPrograme - - -  ', props.materialsInfo)

})

</script>
<style lang="scss" scoped>
.phoneMiniPrograme {
  .title{
    display: flex;
    align-items: center;
    img{
      width: 20px;
      height: 20px;
    }
    span{
      flex: 1;
      width: 0;
      padding-left: 6px;
      font-size: 14px;
      color: #555;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .content{
    margin: 12px 0;
    width: 100%;
    height: 150px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .footer{
    display: flex;
    align-items: center;
    img{
      width: 12px;
      height: 12px;
    }
    span{
      flex: 1;
      width: 0;
      padding-left: 6px;
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
